<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>注册申请</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
	<c:set var="ctx" value="${pageContext.request.contextPath}" />
    <link rel="stylesheet" href="${ctx}/assets/css/amazeui.min.css?v=2.9">
    <link rel="stylesheet" href="${ctx}/assets/css/style.css?v=2.3">
    <link rel="stylesheet" href="${ctx}/assets/css/index.css?v=2.3">
    <script src="${ctx}/assets/js/myAlert.js"></script>
</head>
<body class="bg-gray">
<header data-am-widget="header" class="am-header am-header-default  am-header-fixed">
    <div class="am-header-left am-header-nav">
        <a onclick="history.go(-1)"> <i class="icon_8"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        注册申请
    </h1>
</header>
<form action="${ctx}/registCounselor" id="form1" method="post"  enctype="multipart/form-data">
<section class="am-padding-bottom-lg" id="amz-main" data-tag="css-nav">
    <ul class="am-list am-list-static am-list-border  register">
        <li class="am-padding-left-xl">
            <i class="icon_1"></i>
            <input type="tel" class=""  id="tel" name="counseTel" placeholder="输入您的手机号"></li>
        <li  class="am-padding-left-xl ">
            <i class="icon_2"></i>
            <input type="tel"  class="" id="code" name="code" placeholder="输入4位手机验证码">
            <i class="validate_btn " onclick="createCode()">获取验证码</i>
        </li>
        <li  class="am-padding-left-xl ">
            <i class="icon_0151"></i>
            <input type="password"  class="" id="pwd" name="counsePwd"  placeholder="设置密码(6-20位数字或字母)">

        </li>
    </ul>
    <div class="font-color-13 font-14 am-padding-sm">
        完善您的个人信息（让患者更信赖您）
    </div>

    <ul class="am-list font-14 base-info">
        <li class="am-padding-top-sm am-padding-bottom-sm am-padding-left-sm">
            <div class="box">
                <div class="width-35px prelative">
                    <i class="icon_03"></i>
                </div>
                <div class="width-75px">
                    姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
                </div>
                <div class="box-1">
                    <input class="font-color-15 input-1" id="name" type="text" name="counseName" placeholder="">
                </div>
            </div>
        </li>
        <li class="am-padding-top-sm am-padding-bottom-sm am-padding-left-sm">
            <div class="box">
                <div class="width-35px prelative">
                    <i class="icon_03"></i>
                </div>
                <div class="width-75px">
                    服务城市：
                </div>
                <div class="box-1">
                    <input class="font-color-15 input-1" type="text" id="city" name="serviceCity" placeholder="">
                </div>
            </div>
        </li>
        <li class="am-padding-top-sm am-padding-bottom-sm am-padding-left-sm">
            <div class="box">
                <div class="width-35px prelative">
                    <i class="icon_10_1"></i>
                </div>
                <div class="width-75px">
                    职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：
                </div>
                <div class="box-1  font-color-15  am-padding-right-sm prelative">
                    <div class="selectdiv">
                        <select class="select-1" name="proName">
                            <option>教授</option>
                            <option>高级老师</option>
                            <option>老师</option>
                        </select>
                    </div>
                </div>
            </div>
        </li>

    </ul>

    <div class="bg-white am-margin-top-sm am-padding-top-sm">

        <div class="icon_26 am-text-center font-color-12  am-margin-bottom-sm">
            擅长方向
        </div>

        <div class="am-padding-left-sm am-padding-right-sm  bg-white font-14">
            <div class="am-form-group">
                <label class="am-checkbox-inline am-margin-bottom-sm" style="margin-left: 10px;" >
                    <input type="checkbox"  name="goodDirection" value="1" data-am-ucheck> 学习兴趣
                </label>
                <label class="am-checkbox-inline am-margin-bottom-sm">
                    <input type="checkbox"  name="goodDirection" value="2" data-am-ucheck> 亲子关系
                </label>
                <label class="am-checkbox-inline am-margin-bottom-sm">
                    <input type="checkbox"  name="goodDirection" value="3" data-am-ucheck> 教育理念
                </label>
                <label class="am-checkbox-inline am-margin-bottom-sm">
                    <input type="checkbox"  name="goodDirection" value="4" data-am-ucheck> 学习习惯
                </label>

                <label class="am-checkbox-inline am-margin-bottom-sm"  >
                    <input type="checkbox"  name="goodDirection" value="5" data-am-ucheck> 人际关系
                </label>
                <label class="am-checkbox-inline am-margin-bottom-sm">
                    <input type="checkbox"  name="goodDirection" value="6" data-am-ucheck> 沉迷网络
                </label>
                <label class="am-checkbox-inline am-margin-bottom-sm">
                    <input type="checkbox"  name="goodDirection" value="7" data-am-ucheck> 情绪管理
                </label>
                <label class="am-checkbox-inline am-margin-bottom-sm">
                    <input type="checkbox"  name="goodDirection" value="8" data-am-ucheck> 自控能力
                </label>
            </div>
        </div>
    </div>

    <div class="bg-white am-margin-top-sm am-padding-top-sm">

        <div class="icon_26 am-text-center font-color-12  am-margin-bottom-sm">
            专业背景
        </div>

        <div class="am-padding-left-sm am-padding-right-sm am-padding-bottom-sm bg-white font-14">
            <textarea class="textarea-2" rows="5" name="professional" id="professional" placeholder="填写相关资质证书、任职经历等"></textarea>
        </div>
    </div>

    <div class="bg-white am-margin-top-sm am-padding-top-sm">

        <div class="icon_26 am-text-center font-color-12  am-margin-bottom-sm">
            咨询方式
        </div>

        <div class="am-padding-left-sm am-padding-right-sm  bg-white font-14">
            <div class="am-form-group">
                <label class="am-checkbox-inline am-margin-bottom-sm">
                    <input type="checkbox"  value="3" name="counseType" data-am-ucheck> 视频咨询
                </label>
                <label class="am-checkbox-inline am-margin-bottom-sm">
                    <input type="checkbox"  value="1" name="counseType" data-am-ucheck> 电话咨询
                </label>
                <label class="am-checkbox-inline am-margin-bottom-sm">
                    <input type="checkbox"  value="2" name="counseType" data-am-ucheck> 面对面咨询
                </label>

            </div>
        </div>
    </div>

    <div class="bg-white am-margin-top-sm am-padding-top-sm">

        <div class="icon_26 am-text-center font-color-12  am-margin-bottom-sm">
            服务价格
        </div>

        <div class="am-padding-left-sm am-padding-right-sm  bg-white font-14">
            <div class="am-form-group padding-bottom-7 padding-top-3 ">
                <label class="am-checkbox am-margin-top-sm"  >
                    <input type="checkbox"  value="" name="isService15" data-am-ucheck> 15分钟
                    <input type="text" class="input-2 am-margin-left-sm padding-5" id="s15" name="servicePrice15" value="" placeholder="请输入价格"><span class="am-margin-left-sm">元</span>
                </label>
                <label class="am-checkbox am-margin-top-sm">
                    <input type="checkbox"  value="" name="isService40" data-am-ucheck> 50分钟
                    <input type="text" class="input-2 am-margin-left-sm padding-5" id="s40" name="servicePrice40" value="" placeholder="请输入价格"><span class="am-margin-left-sm">元</span>
                </label>

            </div>
        </div>
    </div>

    <div class="bg-white am-margin-top-sm am-padding-top-sm">

        <div class="icon_26 am-text-center font-color-12  am-margin-bottom-sm">
            您的真实头像
        </div>

        <div class="am-padding-top-xs bg-white am-padding-bottom-xs">
            <ul class="am-avg-sm-4 am-thumbnails am-padding-left-xs am-padding-right-xs ">
                <!--<li class=""><img class="am-thumbnail" src="${ctx}/assets/images/upload/icon_16.png" /></li>-->
                <li class=""> <a href="javascript:;" class="file pic-margin" onclick="changeHead()">
                    <input type="file" id="file0" name="personHead" >
                    <div class="" ><img class="width-100" id="img0" src="${ctx}/assets/images/icon/icon_03.png"><div id="headId" ></div></div>
                </a></li>
            </ul>
        </div>
    </div>

    <div class="am-container am-margin-top-sm">
        <div class="btn-4 word-space-2 padding-left-0" onclick="goSubmit();">确定</div>
      <!-- document.forms[0].submit(); -->
    </div>
    <div class="font-12 font-color-13 am-text-center am-margin-top-sm"><span class="prelative padding-left-25"><i class="icon-select curs"></i>已阅读并同意心理咨询平台</span><span class="font-color-12">《用户协议》</span></div>
</section>
</form>

<!--选择城市-->
<div class="am-popup" id="my-popup">
    <div class="am-popup-inner">

        <header data-am-widget="header" class="am-header am-header-default am-header-fixed ">
            <div class="am-header-left am-header-nav">
                <a class="" data-am-modal-close>
                    <!--更新-->
                    <i class="icon_8"></i>
                </a>
            </div>
            <h1 class="am-header-title">
                选择城市
            </h1>

        </header>

        <section class="" data-tag="css-nav">
            <div class="filter-container">
                <ul class="list-group">
                    <li class="fis-filter-item letter"><a>当前</a> <i></i></li>
                    <li class="fis-filter-item "><a>北京市</a><span class="font-gray-1 font-14">（GPS定位）</span> <i></i></li>
                    <li class="fis-filter-item letter"><a>选择其他城市</a> <i></i></li>
                </ul>
                <ul class="list-group" data-node="city">
                    <li class="fis-filter-item selected" data-am-modal-close><a>苏州市</a> <i></i></li>
                    <li class="fis-filter-item " data-am-modal-close><a>福州市</a> <i></i></li>
                    <li class="fis-filter-item " data-am-modal-close><a>上海市</a> <i></i></li>
                    <li class="fis-filter-item " data-am-modal-close><a>深圳市</a> <i></i></li>
                </ul>


            </div>


        </section>
    </div>
</div>




<script src="${ctx}/assets/js/jquery.min.js"></script>
<script src="${ctx}/assets/js/amazeui.min.js"></script>
<script src="${ctx}/assets/js/common.js"></script>
<script>
	function goSubmit(){
		var telphone=$("#tel").val();
		var code=$("#code").val();
		if($("#tel").val()==""){
			myAlert("请输入电话号码");
			return false;
		}
		if($("#code").val()==""){
			myAlert("请输入短信验证码");
			return false;
		}
		if($("#pwd").val()==""){
			myAlert("请输入咨询师登录密码");
			return false;
		}
		if($("#name").val()==""){
			myAlert("请输入咨询师名称");
			return false;
		}
		if($("#city").val()==""){
			myAlert("请输入咨询师服务城市");
			return false;
		}
		
		var chk_value =[];
		$('input[name="goodDirection"]:checked').each(function(){
		chk_value.push($(this).val());
		});
		if(chk_value.length==0){
			myAlert("请选择您擅长的方向");
			return false;
		}
		if(chk_value.length>3){
			myAlert("注册咨询师擅长的方向不能超过3个");
			return false;
		}
		if($("#professional").val()==""){
			myAlert("请填写相关资质证书，任职经历等");
			return false;
		}
		
		var chk2_value =[];
		$('input[name="counseType"]:checked').each(function(){
		chk2_value.push($(this).val());
		});
		if(chk2_value.length==0){
			myAlert("请选择您的咨询方式");
			return false;
		}
		var chk3_value =[];
		$('input[name="isService15"]:checked').each(function(){
		chk3_value.push($(this).val());
		});
		var chk4_value =[];
		$('input[name="isService40"]:checked').each(function(){
		chk4_value.push($(this).val());
		});
		if(chk3_value.length==0 && chk4_value.length==0){
			myAlert("请至少选择一种咨询价格");
			return false;
		}
		if(chk3_value.length==1){
			if($("#s15").val()==""){
				myAlert("请填写15分钟咨询价格");
				return false;
			}
		}
		if(chk4_value.length==1){
			if($("#s40").val()==""){
				myAlert("请填写50分钟咨询价格");
				return false;
			}
		}
		if($("#file0").val()==""){
			myAlert("请上传咨询师头像");
			return false;
		}
		var baseResponse=$.ajax({url:"${ctx}/isAuthCode?telphone="+telphone+"&code="+code,async:false});
	  	var isAuthCode=JSON.parse(baseResponse.responseText);
	   	if(isAuthCode.resultCode=="0"){
	   		myAlert("注册成功后,管理员需要审核,请耐心等待电话回访。");
	   		document.forms[0].submit();
	   	}else{
	   		myAlert(isAuthCode.resultDesc);
	   	}
	}

    $(".sex-type .icon_6_1").on("click", function () {
        $(this).parent().parent().find(".icon_6_1").removeClass("cur");
        $(this).addClass("cur");
    });
</script>
<script>
var wait=60;  
function createCode(){
	
	 var telphone=$("#tel").val();
	 var reg = /^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
	 if (!reg.test(telphone)) {
	      myAlert("请输入正确的手机号码");
	      return false;
	 }
	
	 var isRegStr=$.ajax({url:"${ctx}/isRegist?counseTel="+telphone,async:false});
	 var isRegJson=JSON.parse(isRegStr.responseText);
	 if(isRegJson.resultCode!="0"){
	 	myAlert("手机号码已经注册过咨询师,请前往登录页面");
	 	return false;
	 }
	
	if(wait==60){
		var baseResponse=$.ajax({url:"${ctx}/sendAuthCode?flag=reg&telphone="+telphone,async:false});
	  	var sendAuthCode=JSON.parse(baseResponse.responseText);
	   	if(sendAuthCode.resultCode=="0"){
	   		
	   	}else{
	   		myAlert(sendAuthCode.resultDesc);
	   	}
	}
	
	if(wait == 0) {  
        $(".validate_btn").removeClass("disabled");
        $(".validate_btn").text("获取验证码");  
        wait = 60;  
    }else {  
        $(".validate_btn").addClass("disabled");
        $(".validate_btn").text("重新发送(" + wait + ")");  
        wait--;  
        setTimeout(function() {  
            createCode(); 
        },  
        1000);  
    } 
}
</script>
<script>
    $(function () {
    
        // 城市选择
       // $("[data-node='city']").find(" li").click(function () {
       //     $("[data-node='city']").find(" li").removeClass("selected");
       //     $(this).addClass("selected");
       //     $("#span_city").text($(this).text().substring(0, 2));
       // });
       
       $("#file0").change(function(){
	var objUrl = getObjectURL(this.files[0]) ;
	console.log("objUrl = "+objUrl) ;
	if (objUrl) {
		$("#img0").attr("src", objUrl) ;
	}
	}) ;
	//建立一個可存取到該file的url
	function getObjectURL(file) {
		var url = null ; 
		if (window.createObjectURL!=undefined) { // basic
			url = window.createObjectURL(file) ;
		} else if (window.URL!=undefined) { // mozilla(firefox)
			url = window.URL.createObjectURL(file) ;
		} else if (window.webkitURL!=undefined) { // webkit or chrome
			url = window.webkitURL.createObjectURL(file) ;
		}
		return url ;
	}
    });
</script>

</body>
</html>